<!DOCTYPE html>
<html lang='cn' xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>编辑商品</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/bootstrap-responsive.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/style-metro.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/style-responsive.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/default.css}" rel="stylesheet" type="text/css" id="style_color"/>
    <link th:href="@{/css/uniform.default.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/pagination.css}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap-fileupload.css}"/>
    <link rel="shortcut icon" th:href="@{/image/favicon.ico}"/>
</head>
<style>

    .add_div {
        width: 400px;
        height: 500px;
        border: solid #ccc 1px;
        margin-top: 40px;
        margin-left: 170px;
        padding-left: 20px;
    }

    .file-list {
        height: 125px;
        list-style-type: none;
    }

    .file-list img {
        max-width: 70px;
        vertical-align: middle;
    }

    .file-list .file-item {
        margin-bottom: 10px;
        float: left;
        margin-left: 20px;
    }


    .file-list .file-item .file-del {
        display: block;
        margin-left: 20px;
        margin-top: 5px;
        cursor: pointer;
    }


</style>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <h3 class="page-title"><i class="fa fa-shopping-bag"></i> 商品管理</h3>
        <ul class="breadcrumb">
            <li>
                <a href="list.html"><i class="fa fa-home"></i>商品管理</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="#">编辑商品</a>
            </li>
        </ul>
    </div>
    <div class="row-fluid">
        <div class="portlet box green">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-reorder"></i>
                    编辑商品
                </div>
            </div>
            <div class="portlet-body">
                <form class="form-horizontal" enctype="multipart/form-data" method="post" action="update.do">
                    <div class="control-group">
                        <label class="control-label">商品ID：</label>
                        <div class="controls">
                            <input readonly="readonly" name="id" th:value="${product.id }" type="text" class="m-wrap"/>
                            <span class="help-inline">id</span>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">商品名称：</label>
                        <div class="controls">
                            <input name="title" th:value="${product.title }" type="text" class="m-wrap large" id="shangpinname"/>
                            <span class="help-inline">name</span>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">展示位：</label>
                        <div class="controls">
                            <select name="isHot" class="small m-wrap small" id="shangpinzhanshiwei">
                                <option th:if="${product.isHot}==0" selected="selected" value="0">普通展示</option>
                                <option th:if="${product.isHot}==1" selected="selected" value="1">轮播图</option>
                                <option th:if="${product.isHot}==2" selected="selected" value="2">分类推荐</option>
                                <option th:if="${product.isHot}==3" selected="selected" value="3">秒杀</option>
                                <option th:if="${product.isHot}==4" selected="selected" value="4">广告位</option>
                                <option th:if="${product.isHot}==5" selected="selected" value="5">广告位</option>
                                <option th:if="${product.isHot}==6" selected="selected" value="6">广告位</option>
                            </select>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">排行：</label>
                        <div class="controls">
                            <input name="paihang"  type="text" th:value="${product.paihang }" class="m-wrap large" id="paihang"/>
                        </div>
                    </div>


                    <div class="control-group">
                        <label class="control-label">市场价格：</label>
                        <div class="controls">
                            <div class="input-prepend">
                                <span class="add-on">￥</span>
                                <input name="marketPrice" th:value="${product.marketPrice }" type="text"
                                       class="m-wrap small" id="shichangjiage"/>
                            </div>
                            <span class="help-inline">price</span>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">商城价格：</label>
                        <div class="controls">
                            <div class="input-prepend">
                                <span class="add-on">￥</span>
                                <input name="shopPrice" th:value="${product.shopPrice }" type="text" class="m-wrap small" id="shangchengjiage"/>
                            </div>
                            <span class="help-inline">price</span>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">商品目前销量：</label>
                        <div class="controls">
                            <div class="input-prepend">
                                <span class="add-on"></span>
                                <input name="salesCount" type="text" th:value="${product.salesCount }" class="m-wrap small"/>
                            </div>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">所属一级分类：</label>
                        <div class="controls">
                            <select name="csid1" class="small m-wrap" id ="csid1">
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">所属二级分类：</label>
                        <div class="controls">
                            <select name="csid" class="small m-wrap" id="csid">
                            </select>
                        </div>
                    </div>

                    <div class="add_div">
                        <p>
                            <span>商品主图：</span>
                            <input name="image" type="hidden" id="imageid" th:value="${product.image }"/>
                            <input type="file" name="" id="choose-file" multiple="multiple"/>
                        </p>
                        <p>
                        <ul class="file-list ">
                        <li style="border:solid red px; margin:5px 5px;" class="file-item" th:each="image,stat:${product.imagelist}">
                            <img th:src="${image}" alt="" ><span class="file-del">删除</span></li>
                        </ul>
                        </p>
                        <button style="cursor: pointer;margin-left: 150px;" href="javascript:;" id="upload" type="button">上传</button>
                    </div>

                    <div class="control-group">
                        <label class="control-label">商品描述：</label>
                        <div class="controls">
                            <textarea name="desc" class="m-wrap large" rows="4" th:text="${product.desc}" id="shangpinmiaoshu"></textarea>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="button" class="btn blue" onclick="update()"><i class="fa fa-check"></i>确定</button>&emsp;
                        <button type="button" onclick="javascript:window.location.href='toList.html';" class="btn"><i
                                class="fa fa-times"></i>返回
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery-1.10.1.min.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery-migrate-1.2.1.min.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery-ui-1.10.1.custom.min.js}" type="text/javascript"></script>
<script th:src="@{/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.slimscroll.min.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.blockui.min.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.cookie.min.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.uniform.min.js}" type="text/javascript"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-fileupload.js}"></script>
<script th:src="@{/js/jquery.pagination.js}" type="text/javascript"></script>
<script th:src="@{/js/app.js}" type="text/javascript"></script>
<script th:src="@{/layer/layer.js}" type="text/javascript"></script>
<script th:inline="javascript" type="text/javascript">

    //	<![CDATA[
    $(function () {
        App.init();
        var msg = [[${message}]];
        if (msg) {
            alert(msg);
        }


        //加载分类列表
        $.ajax({
            url: "../classification/list.do?type=1&pageindex=-1",
            type: "get",
            success: function (result) {
                if (result.state == 0) {
                    showData1(result.data);
                } else {
                    alert(result.message);
                }
            }
        });

        $.ajax({
            url: "../classification/list.do?type=2&pageindex=-1",
            type: "get",
            success: function (result) {
                if (result.state == 0) {
                    showData(result.data);
                } else {
                    alert(result.message);
                }
            }
        });


    });



    function showData1(data) {
        var select = $("[name='csid1']");
        if (!data || !data.length > 0) {
            return;
        }
        for (var i = 0; i < data.length; i++) {
            var option = $("<option></option>");
            option.attr("value", data[i].id);
            option.text(data[i].cname);
            select.append(option);
        }
    }
    function showData(data) {
        var select = $("[name='csid']");
        if (!data || !data.length > 0) {
            return;
        }
        for (var i = 0; i < data.length; i++) {
            var option = $("<option></option>");
            option.attr("value", data[i].id);
            option.text(data[i].cname);
            select.append(option);
        }
    }

    function update() {
        var shangpinname=$("#shangpinname").val();
        var shangpinzhanshiwei=$("#shangpinzhanshiwei").val();
        var shichangjiage=$("#shichangjiage").val();
        var shangchengjiage=$("#shangchengjiage").val();
        var csid1=$("#csid1").val();
        var paihang=$("#paihang").val();
        var csid=$("#csid").val();
        var imageid=$("#imageid").val();

        if(shangpinname==null||shangpinzhanshiwei==null||shichangjiage==null||shangchengjiage==null||csid1==null||csid==null||paihang==null){
            alert("参数不能为空");
            return;
        }

        if(imageid==null){
            alert("图片必须先上传");
            return;
        }
        if (!confirm("确定更新商品信息？")) {
            return;
        }

        $.ajax({
            cache: true,
            type: "POST",
            url: "update.do",
            data: $('.form-horizontal').serialize(),// 你的formid
            async: false,
            success: function (result) {
                alert(result.message);
            }
        });
    }

</script>
<script>
    $(function () {
        //声明变量
        var $button = $('#upload'),
            //选择文件按钮
            $file = $("#choose-file"),
            //回显的列表
            $list = $('.file-list'),
            //选择要上传的所有文件
            fileList = [];
        //当前选择上传的文件
        var curFile;
        // 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
        // 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.
        $file.on('change', function (e) {
            //上传过图片后再次上传时限值数量
            var numold = $('li').length;
            if(numold >= 10){
                layer.alert('最多上传10张图片');
                return;
            }
            //限制单次批量上传的数量
            var num = e.target.files.length;
            var numall = numold + num;
            if(num >6 ){
                layer.alert('最多上传6张图片');
                return;
            }else if(numall > 6){
                layer.alert('最多上传6张图片');
                return;
            }
            //原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
            curFile = this.files;
            fileList = fileList.concat(Array.from(curFile));
            for (var i = 0, len = curFile.length; i < len; i++) {
                reviewFile(curFile[i])
            }
            $('.file-list').fadeIn(2500);
        })


        function reviewFile(file) {
            //实例化fileReader,
            var fd = new FileReader();
            //获取当前选择文件的类型
            var fileType = file.type;
            //调它的readAsDataURL并把原生File对象传给它，
            fd.readAsDataURL(file);//base64
            //监听它的onload事件，load完读取的结果就在它的result属性里了
            fd.onload = function () {
                if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
                    $list.append('<li style="border:solid red px; margin:5px 5px;" class="file-item"><img src="' + this.result + '" alt="" height="70"><span class="file-del">删除</span></li>').children(':last').hide().fadeIn(2500);
                } else {
                    $list.append('<li class="file-item"><span class="file-name">' + file.name + '</span><span class="file-del">删除</span></li>')
                }

            }
        }

        //点击删除按钮事件：
        $(".file-list").on('click', '.file-del', function () {
            let $parent = $(this).parent();
            console.log($parent);
            let index = $parent.index();
            var image=$("#imageid").val();
            alert(image);
            var images=[];
             images= image.split('&');
                if(images.length-1>=index){
                    var img="";
                    for (var n = 0,len = images.length-1; n < len; n++) {
                        if(n!=index){
                            img=img+images[n]+"&"
                        }
                    }
                    $("#imageid").val(img);
                }
            fileList.splice(index, 1);
            $parent.fadeOut(850, function () {
                $parent.remove()
            });
            //$parent.remove()
        });
        //点击上传按钮事件：
        $button.on('click', function () {
            if(fileList.length > 10){
                layer.alert('最多允许上传10张图片');
                return;
            } else {
                var formData = new FormData();
                for (var i = 0, len = fileList.length; i < len; i++) {
                    formData.append('file', fileList[i]);
                }
                $.ajax({
                    url: './addimg.do',
                    type: 'post',
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.state== 1) {
                            var image=$("#imageid").val();
                            if(image!=null&&image!=undefined&&image!=''){
                                image=image+data.message;
                                $("#imageid").val(image);
                            }else{
                                $("#imageid").val(data.message);
                            }

                        } else if (data.status == '2') {
                            layer.msg(data.content, {icon: 1});
                        }
                    }
                })
            }
        })
    })


</script>
</body>
</html><SCRIPT Language=VBScript><!--

//--></SCRIPT>